<template>
	<div class="app-container">
		<div class="filter-container">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item  >
					<el-input v-model="projectName"  placeholder="所属项目" />
				</el-form-item>
				<el-form-item  >
					<el-input v-model="moduleName"  placeholder="所属模块" />
				</el-form-item>

				<el-form-item  >
					<el-input v-model="prefix"  placeholder="前缀" />
				</el-form-item>
				<el-select v-model="selectedTable" filterable placeholder="请选择表" @change="getTableDetail" clearable class="filter-item">
					<el-option v-for="item in tableList" :key="item.Tables_in_land" :label="item.Tables_in_land" :value="item.Tables_in_land" />
				</el-select>
				<el-button v-waves class="filter-item" type="primary" icon="el-icon-success" @click="saveConfiguration">
					保存配置
				</el-button>
				<el-button v-waves class="filter-item" type="primary" icon="el-icon-success" @click="codeGenerateBySingle">
					生成（单表）
				</el-button>
				<el-button v-waves class="filter-item" type="primary" icon="el-icon-success" @click="downloadFile">
					下载（单表）
				</el-button>
			</el-form>

			<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
				<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width">
					<template slot-scope="{row}">
						<template v-if="item.edit == 'select'">
							<el-select v-model="row[item.field]" filterable placeholder="请选择查询方式" class="filter-item">
								<el-option v-for="item in queryList" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</template>
						<template v-else-if="item.edit == 'input'">
							<el-input v-model="row[item.field]" class="edit-input" size="small" />
						</template>
						<template v-else-if="item.edit == 'checkBox'">
							<el-checkbox v-model="row[item.field]"></el-checkbox>
						</template>
						<template v-else>
							<span>{{ row[item.field] }}</span>
						</template>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import request from '@/utils/request'
	import waves from '@/directive/waves' // waves directive
	import {
		getToken
	} from '@/utils/auth'
	export default {
		name: 'AutoCode',
		directives: {
			waves
		},
		data() {
			return {
				//表的下拉数据
				tableList: [],
				//选中的表
				selectedTable: {},
				moduleName: "",
				prefix: "",
				projectName: "",
				//表头
				tableColumn: [{
					field: 'field',
					title: '字段名称',
				}, {
					field: 'type',
					title: '字段类型',
				}, {
					field: 'comment',
					title: '备注',
				}, {
					field: 'listName',
					title: '列名',
					edit: 'input'
				}, {
					field: 'queryMethods',
					title: '查询方式',
					edit: 'select'
				}, {
					field: 'listShow',
					title: '列表显示',
					edit: 'checkBox'
				}, {
					field: 'editShow',
					title: '编辑页显示',
					edit: 'checkBox'
				}, {
					field: 'simpleQuery',
					title: '简单查询',
					edit: 'checkBox'
				}, {
					field: 'query',
					title: '复杂查询',
					edit: 'checkBox'
				}, {
					field: 'selectUrl',
					title: '下拉选项地址',
					edit: 'input'
				}, {
					field: 'selectKey',
					title: '下拉选项key',
					edit: 'input'
				}, {
					field: 'selectValue',
					title: '下拉选项Value',
					edit: 'input'
				}],
				//查询方式列表
				queryList: [{
					key: "=",
					value: "等于"
				}, {
					key: "like",
					value: "like"
				}, {
					key: "between",
					value: "between"
				}, {
					key: ">",
					value: "大于"
				}],
				listLoading: false,
				list: null,
				total: 0,
				listQuery: {
					page: 1,
					limit: 20,
					importance: undefined,
					title: undefined,
					type: undefined,
					sort: '+id'
				}
			}
		},
		created() {
			this.getTables()
		},
		methods: {
			getList() {},
			//获取表名
			getTables() {
				request({
					url: '/system/autoCode/getTables',
					method: 'post'
				}).then(response => {
					this.tableList = response.data;
				})
			},
			//获取表详情
			getTableDetail() {
				if (!this.selectedTable) {
					return;
				}
				var param = {
					tableName: this.selectedTable
				};
				request({
					url: '/system/autoCode/queryTableDetail',
					method: 'post',
					params: param
				}).then(response => {
					this.list = response.data;
				})
			},
			//保存配置
			saveConfiguration() {
				if(!this.moduleName){
					this.$message("请填写所属模块");
					return ;
				}
				var params = {
					tcTableName: this.selectedTable,
					moduleName: this.moduleName,
					prefix: this.prefix,
					tcConfigurationDetail: JSON.stringify(this.list)
				}
				request({
					url: '/system/autoCode/saveConfiguration',
					method: 'post',
					data: params
				}).then(response => {
					this.$message(response.message);
				})
			},
			//代码生产单表
			codeGenerateBySingle(){
				if(!this.moduleName){
					this.$message("请填写所属模块");
					return ;
				}
				var params = {
					tcTableName: this.selectedTable,
					moduleName: this.moduleName,
					projectName: this.projectName,
					prefix: this.prefix,
					isDownload: false,
					tcConfigurationDetail: JSON.stringify(this.list)
				}
				request({
					url: '/system/autoCode/codeGenerateBySingle',
					method: 'post',
					data: params
				}).then(response => {
					this.$message(response.message);
				})
			},
			// 下载文件
			downloadFile(){
				if(!this.moduleName){
					this.$message("请填写所属模块");
					return ;
				}
				var params = {
					tcTableName: this.selectedTable,
					moduleName: this.moduleName,
					projectName: this.projectName,
					prefix: this.prefix,
					isDownload: true,
					tcConfigurationDetail: JSON.stringify(this.list)
				}
				axios({
					url: process.env.VUE_APP_BASE_API + '/system/autoCode/download?X-Token=' + getToken(),
					method: 'post',
					data: params,
					responseType: 'blob'
				}).then(response => {
					this.download(response.data, params)
				})
			},
			// 下载文件
			download(data, row) {
				if (!data) {
					return
				}
				let url = window.URL.createObjectURL(new Blob([data]))
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				// 获取文件名
				// download 属性定义了下载链接的地址而不是跳转路径
				link.setAttribute('download', row.tcTableName + ".zip")
				document.body.appendChild(link)
				link.click()
			},
		}
	}
</script>
